<template>
    <div class="login-container">
        <div class="background-box">
            <h3 class="left-title">欢迎登录外卖管理系统</h3>
        </div>
        <!-- 表单容器 -->
        <div class="form-container">
            <h3 class="title">系统登录</h3>

            <!-- 把表单元素框封装成一个组件 -->
            <login-form></login-form>
        </div>

    </div>
</template>

<script>
import LoginForm from './LoginForm.vue'

    export default {
        components: {
            LoginForm
        }
    }
</script>

<style lang="less" scoped>
.login-container {
    display: flex;
    height: 100%;
    .background-box {
        position: relative;
        width: 65%;
        background: url('../../assets/imgs/bg1.jpg') no-repeat right center;
        background-size: cover;

        .left-title {
            position: absolute;
           top: 20%;
           left: 50%;
           width: 500px;
           transform: translateX(-50%);
            color: #fff;
            font-size: 40px;
            
        }
        
    }
    .form-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .title{
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: #000;
        }
        /deep/.el-form {
            width: 300px;
        }

        /deep/.el-button--warning {
            background-color: #fbce59;
            border-color: #fbce59;
        }
    }

}
</style>